<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>view组件中模板的切换</title>
    <script src="js/1.4.8/angular.js"></script>
    <script src="js/1.4.8/angular-route.js"></script>
</head>
<body>
    <div ng-view></div>
    <script type="application/javascript">
        var app = angular.module("app",["ngRoute"]);
        app.config(["$routeProvider",function ($routeProvider) {
            $routeProvider
                    .when('/',{
                        controller:'myCtrl1',
                        templateUrl:'view-list.html'
                    })
                    .when('/view/:id',{
                        controller:'myCtrl2',
                        templateUrl:'view-detail.html',
                        publicAccess: true
                    })
                    .otherwise({
                        redirectTo:'/'
                    });
        }]);

        app.controller("myCtrl1",["$scope",function ($scope) {
            $scope.students =students;
        }]);
        app.controller("myCtrl2",["$scope","$routeParams",function ($scope,$routeParams) {
            for(var i = 0; i < students.length; i++){
                if(students[i].stuId == $routeParams.id){
                    $scope.student = students[i];
                    break;
                }
            }
        }]);

        var students =[
            {stuId:1000, name:"张三",sex:"男",score:80},
            {stuId:1001, name:"李四",sex:"男",score:86},
            {stuId:1002, name:"王五",sex:"男",score:60},
            {stuId:1003, name:"翠花",sex:"女",score:98},
        ];
    </script>
</body>
</html>